<template>
    <div class="order-detail-info" v-if="showInfo">
        <div class="order-detail-info-title">订单信息</div>
        <van-field class="order-detail-info-field" label="订单编号:"
                   :value="order.id" :border="false" center readonly/>
        <van-field class="order-detail-info-field" label="下单时间:"
                   :value="order.placedTime" :border="false" center readonly/>
        <van-field class="order-detail-info-field" label="付款时间:"
                   :value="order.paidTime" v-if="order.paidTime" :border="false" center readonly/>
        <van-field class="order-detail-info-field" label="发货时间:"
                   :value="order.shippedTime" v-if="order.shippedTime" :border="false" center readonly/>
    </div>
</template>

<script>
  import { order } from "@mall/api-services"
  import { Field } from "vant"
  import { isAwaitingPayment } from "@/utils/order"

  export default {
    name: "OrderDetailInfo",
    components: {
      [Field.name]: Field,
    },
    props: {
      order: order.Order,
    },
    computed: {
      showInfo() {
        const { order: aOrder } = this
        return !isAwaitingPayment(aOrder.status)
      },
    },
  }
</script>

<style lang="scss" scoped>
    .order-detail-info {
        background: #fff;

        .order-detail-info-title {
            padding-top: 9px;
            padding-left: 9px;
        }

        .order-detail-info-field {
            line-height: 1rem;
            padding: 9px;
        }
    }
</style>
